<template>
    <div>
        <!-- visible.sync  v-model  自定义组件上能够使用v-model -->
        <el-dialog :title="form.id ? '菜单编辑' : '菜单添加'" :visible.sync="buffer.formBuffer">
            <el-form :model="form">
                {{ form }}
                <!-- 顶级菜单id==>pid -->
                <el-form-item label="顶级菜单" :label-width="formLabelWidth">
                    <el-select v-model="form.pid" placeholder="请选择" @change="changePid"
                        :disabled="form.id ? true : false">
                        <el-option label="顶级菜单" :value="0"></el-option>
                        <el-option v-for="item in menuList" :key="item.id" :label="item.title" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <!-- 菜单名称 -->
                <el-form-item label="菜单名称" :label-width="formLabelWidth">
                    <el-input v-model="form.title" autocomplete="off"></el-input>
                </el-form-item>
                <!-- 目录图标 -->
                <el-form-item label="目录图标" :label-width="formLabelWidth" v-show="form.pid == 0">
                    <!-- <el-input v-model="form.icon" autocomplete="off"></el-input> -->
                    <!-- 使用第三方icon组件 实现图标图形化选择 -->
                    <icon-picker v-model="form.icon"></icon-picker>
                </el-form-item>
                <!-- 菜单路由 -->
                <el-form-item label="菜单地址" :label-width="formLabelWidth" v-show="form.pid != 0">
                    <el-input v-model="form.url" autocomplete="off"></el-input>
                </el-form-item>
                <!-- 菜单类型 -->
                <el-form-item label="菜单类型" :label-width="formLabelWidth">
                    <el-radio v-model="form.type" :label="1" disabled>目录</el-radio>
                    <el-radio v-model="form.type" :label="2" disabled>菜单</el-radio>
                </el-form-item>
                <!-- 菜单状态 -->
                <el-form-item label="菜单状态" :label-width="formLabelWidth">
                    <el-switch v-model="form.status" :active-value="1" :inactive-value="2">
                    </el-switch>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="buffer.formBuffer = false">取 消</el-button>
                <el-button type="primary" @click="submit()">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    props: ['buffer', 'menuList'],
    data() {
        return {
            form: {
                pid: 0,  //顶级菜单id
                title: '',//菜单名称
                icon: '',//菜单图标
                type: 1,//菜单类型 1：目录  2：菜单
                url: '',//菜单路由
                status: 1//1 启用  2禁用
            },
            formLabelWidth: '120px'
        };
    },
    watch: {
        buffer: {
            handler(newV, oldV) {
                if (newV.formBuffer == false) {
                    this.form = {
                        pid: 0,  //顶级菜单id
                        title: '',//菜单名称
                        icon: '',//菜单图标
                        type: 1,//菜单类型 1：目录  2：菜单
                        url: '',//菜单路由
                        status: 1//1 启用  2禁用
                    }
                }
            },
            deep: true,//使用深度监听
        }
    },
    mounted() {

    },
    methods: {
        submit() {
            // 1.获取所有的表单数据
            // 2.验证表单数据格式
            // 3.执行提交
            // let a = 12;注意次三元上方语句结尾一定加 ';'
            (this.form.id ? this.$api.reqEditMenu(this.form) : this.$api.reqAddMenu(this.form))
                .then(res => {
                    // console.log(res)
                    // 3.1关闭弹窗
                    this.buffer.formBuffer = false
                    // 3.2提示用户操作成功
                    this.$message({ type: "success", message: "操作成功！" })
                    // 3.3赋空表单数据(使用了watch)
                    // 3.4更新数据列表
                    this.$emit('channel', '更新数据吧！')
                })
                .catch(err => console.log(err))

         

        },
        // 监听下拉选择变化
        changePid(pid) {
            // pid == 0 ? this.form.type = 1 : this.form.type = 2
            if (pid == 0) {
                this.form.type = 1
                this.form.url = ""
            } else {
                this.form.type = 2
                this.form.icon = ""
            }
        }
    },
};
</script>

<style scoped>

</style>
